import { useReactive } from "ahooks";
import { Form, Input, Button, Radio, Table } from "antd";
import { v4 as uuidv4 } from "uuid";
import { useModel } from "umi";
import { useEffect } from "react";
import { message } from "antd";
import { Popconfirm } from "antd";

const DesktopMainControlFeedBack = () => {
	const { feedBackOptions, runEnv, remoteData } = useModel("global");
	const { baseInfo } = useModel("person.info");

	const [form] = Form.useForm();

	const state = useReactive({
		loading: false,
		submitLoading: false,
		feedbacks: [],
		baseInfo: {},
	});

	const loadFeedbacks = async () => {
		let res = await remoteData({
			object: "bnt-application-operation-center-service",
			serviceName: "/feedback/getDesktopMainFeedbacks",
			params: { piUuid: baseInfo.uuid, runEnv },
		});
		state.feedbacks = res || [];
	};

	useEffect(() => {
		loadFeedbacks();
	}, []);

	const onFinish = async (values) => {
		state.loading = true;
		let params = {
			...values,
			fdUuid: uuidv4(), // 反馈UUID
			fdTime: new Date().getUTCTime(), // 反馈时间
			fdRuen: runEnv, // 反馈的运行环境
			piUuid: baseInfo.uuid, // 反馈人UUID
			piName: baseInfo.realName, // 反馈人姓名
		};
		let res = await remoteData({
			object: "bnt-application-operation-center-service",
			serviceName: "/feedback/from/desktop/main",
			params,
		});
		if (res) {
			message.success("成功提交反馈");
			window.close();
		}
		state.loading = false;
	};

	const removeFeedback = async (fdUuid) => {
		let res = await remoteData({
			object: "bnt-application-operation-center-service",
			serviceName: "/feedback/deleteDesktopMainFeedback",
			params: { fdUuid },
		});
		if (res) {
			message.success("成功取消反馈");
			loadFeedbacks();
		}
	};

	const contentValidater = (rule, value) => {
		if (value && helper.validates("textArea", value)) {
			return Promise.resolve();
		} else {
			return Promise.reject("输入了不合适的字符, 请修改");
		}
	};

	return (
		<div style={{ padding: 20 }}>
			<Form name="account_login" form={form} layout="horizontal" onFinish={onFinish}>
				<Form.Item label="主题" name="fdType" rules={[{ required: true, message: "请选择反馈主题" }]}>
					<Radio.Group>
						{feedBackOptions.map((item, index) => (
							<Radio key={index} value={item.title}>
								{item.title}
							</Radio>
						))}
					</Radio.Group>
				</Form.Item>

				<Form.Item label="内容" name="fdText" rules={[{ required: true, message: "请输入反馈内容", validator: contentValidater }]}>
					<Input.TextArea placeholder="请输入" rows={4} />
				</Form.Item>

				<Form.Item style={{ textAlign: "center", paddingTop: 16 }}>
					<Button loading={state.loading} type="primary" htmlType="submit" style={{ width: 500 }}>
						提交
					</Button>
				</Form.Item>
			</Form>

			{state.feedbacks.length > 0 && (
				<Table title={() => "已提交的反馈"} dataSource={state.feedbacks} bordered size="small" rowKey={"fdUuid"} pagination={false} scroll={{ y: 200 }}>
					<Table.Column title="序号" width={60} align="center" render={(_, r, i) => i + 1} />
					<Table.Column title="主题" width={60} dataIndex={"fdType"} align="center" />
					<Table.Column title="内容" dataIndex={"fdText"} />
					<Table.Column title="状态" dataIndex={"fdStat"} width={100} align="center" />
					<Table.Column
						title="操作"
						width={80}
						align="center"
						render={(_, r, i) => {
							return r.piUuid === baseInfo.uuid && r.fdStat === "待处理" ? (
								<Popconfirm title="确认要取消反馈吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={() => removeFeedback(r.fdUuid)}>
									<a>取消</a>
								</Popconfirm>
							) : (
								""
							);
						}}
					/>
				</Table>
			)}
		</div>
	);
};

export default DesktopMainControlFeedBack;
